<template>
    <a-layout
            style="width: 80%;height: 80%;position: fixed;top: 10%;left: 15%;border: 1px solid #ccc;border-radius: 10px;overflow: hidden;">
        <a-layout-sider style="border-right: 1px solid #ccc">
            <div style="display: flex;align-items: center;justify-content: left;padding-left:20px;margin-top: 20px;">
                <a-avatar shape="square">
                    <img alt="avatar"
                         :src="user.userFace"/>
                </a-avatar>
                <span style="font-weight: bold;margin-left: 20px;">
                    {{user.name}}
                </span>
            </div>
            <div style="position: absolute;width: 100%;top: 80px;left: 0px;">
                <a-input-search v-model="keyword" search-button></a-input-search>
            </div>
            <a-list style="height: 100%;width:100%;position: absolute;left: 0px;top: 120px;">
                <a-list-item v-for="(item,index) in admins" :key="item.id"
                             :class="activityId===item.id?'listItemAct':'listItem'"
                             @click="clickAdmin(item)">
                    <a-list-item-meta :title="item.name"
                                      description="最近消息"
                    >
                        <template #avatar>
                            <a-badge :count="dots[user.username+'#'+item.username]?parseInt(dots[user.username+'#'+item.username]):0">
                                <a-avatar shape="square">
                                    <img alt="avatar"
                                         :src="item.userFace"/>
                                </a-avatar>
                            </a-badge>
                        </template>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
        </a-layout-sider>
        <a-layout>
            <a-layout-content>
                <div style="width: 100%;height: 70%;overflow-y: scroll;">
                    <ul v-if="currentSession">
                        <li v-for="(entry,index) in sessions[user.username+'#'+currentSession.username]" :key="index">
                            <p>
                                <span>{{entry.data}}</span>
                            </p>
                            <div :style="{display:'flex',justifyContent:entry.self?'right':'left',alignItems:'center'}">
                                <p class="content" v-if="entry.self"
                                   style="background-color: #ccc;color: white;">
                                    {{entry.content}}
                                </p>
                                <a-avatar>
                                    <img :src="entry.self?user.userFace:currentSession.userFace"/>
                                </a-avatar>
                                <p class="content" v-if="!entry.self"
                                   style="background-color: green;color: white;">
                                    {{entry.content}}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="width: 100%;height: 30%;">
                    <a-textarea :disabled="activityId===-1" style="height: 100%;border-top: 1px solid #ccc;"
                                placeholder="按 ctrl+Enter 发送"
                                :auto-size="{minRows:2,maxRows:10}"
                                v-model="content"
                                @keyup="addMessage"
                    />
                </div>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: '',
        data() {
            return {
                user: this.$store.state.currentAdmin,
                keyword: '',
                activityId: -1,
                content: '',
                stomp: null
            }
        },
        computed: mapState([
            'dots',
            'admins',
            'sessions',
            'currentSession'
        ]),
        methods: {
            clickAdmin(admin) {
                this.activityId = admin.id
                this.$store.commit('changeCurrentSession', admin)
            },
            addMessage(e) {
                if (e.ctrlKey && e.keyCode === 13 && this.content.length) {
                    let msg = {
                        to: this.$store.state.currentSession.username,
                        content: this.content
                    }
                    this.$store.state.stomp.send('/wsyeb/chat', {}, JSON.stringify(msg))
                    this.$store.commit('addMessage', msg)
                    this.content = ''

                }
            }
        },
        mounted() {
            this.$store.dispatch('initData')
        }
    }
</script>

<style scoped>
    .listItem {
        cursor: pointer;
        background-color: #fff;
    }

    .listItemAct {
        cursor: pointer;
        background-color: #ccc;
    }

    .listItem:hover {
        background-color: #ccc;
    }

    .content {
        display: inline-block;
        width: 120px;
        font-size: 24px;
        height: 32px;
        border-radius: 5px;
    }
</style>
